// ResizeObserver 错误处理工具
// 解决 Element Plus 组件在调整大小时产生的 ResizeObserver 错误

export function setupResizeObserverFix() {
  // 防抖函数
  const debounce = (func, wait) => {
    let timeout
    return function executedFunction(...args) {
      const later = () => {
        clearTimeout(timeout)
        func(...args)
      }
      clearTimeout(timeout)
      timeout = setTimeout(later, wait)
    }
  }

  // 检查是否已经设置过
  if (window._resizeObserverFixed) {
    return
  }

  // 保存原始的 ResizeObserver
  const _ResizeObserver = window.ResizeObserver

  // 创建新的 ResizeObserver 类
  window.ResizeObserver = class ResizeObserver extends _ResizeObserver {
    constructor(callback) {
      // 对回调函数进行防抖处理，避免频繁触发
      const debouncedCallback = debounce(callback, 16)
      super(debouncedCallback)
    }
  }

  // 全局错误处理 - 忽略 ResizeObserver 相关错误
  const originalError = console.error
  console.error = (...args) => {
    if (
      args[0] && 
      typeof args[0] === 'string' && 
      (args[0].includes('ResizeObserver loop completed with undelivered notifications') ||
       args[0].includes('ResizeObserver loop limit exceeded') ||
       args[0].includes('ResizeObserver'))
    ) {
      return // 忽略 ResizeObserver 相关错误
    }
    originalError.apply(console, args)
  }

  // 标记已设置
  window._resizeObserverFixed = true
}

// 为 Element Plus 表格组件添加特殊处理
export function setupElementPlusTableFix() {
  // 监听 DOM 变化，为表格添加特殊处理
  const observer = new MutationObserver((mutations) => {
    mutations.forEach((mutation) => {
      mutation.addedNodes.forEach((node) => {
        if (node.nodeType === Node.ELEMENT_NODE) {
          // 查找表格组件
          const tables = node.querySelectorAll ? node.querySelectorAll('.el-table') : []
          tables.forEach(table => {
            // 为表格添加 resize 事件处理
            if (!table._resizeHandlerAdded) {
              table._resizeHandlerAdded = true
              
              // 使用 ResizeObserver 监听表格大小变化
              const resizeObserver = new ResizeObserver(debounce(() => {
                // 触发表格重新计算列宽
                const tableInstance = table.__vueParentComponent?.ctx
                if (tableInstance && typeof tableInstance.doLayout === 'function') {
                  tableInstance.doLayout()
                }
              }, 100))

              resizeObserver.observe(table)
            }
          })
        }
      })
    })
  })

  // 开始观察
  observer.observe(document.body, {
    childList: true,
    subtree: true
  })
}

// 防抖函数
function debounce(func, wait) {
  let timeout
  return function executedFunction(...args) {
    const later = () => {
      clearTimeout(timeout)
      func(...args)
    }
    clearTimeout(timeout)
    timeout = setTimeout(later, wait)
  }
}

// 自动设置
if (typeof window !== 'undefined') {
  setupResizeObserverFix()
  
  // 等待 DOM 加载完成后设置表格修复
  if (document.readyState === 'loading') {
    document.addEventListener('DOMContentLoaded', setupElementPlusTableFix)
  } else {
    setupElementPlusTableFix()
  }
} 